<template>
    <div class="box">
        <h2>修改</h2>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            :size="formSize"
            status-icon
        >
            <el-form-item label="排序">
            <el-input v-model="ruleForm.num"  style="width:300px;"/>
            </el-form-item>
            <el-form-item label="选择父级部门">
                <el-cascader v-model="ruleForm.parent_id" :options="data.list" :props="prop"  popper-class="popper" filterable style="width:300px" @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
            <el-input v-model="ruleForm.name" style="width:300px;" placeholder="请输入部门名称"/>
            </el-form-item>
            <el-form-item label="负责人名称">
              <el-select v-model="ruleForm.user" placeholder="请输入负责人名称" style="width:300px;">
                  <el-option  v-for="(item) in data.adminlist"  :label="item.admin_name" :value="item.admin_id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人手机号" prop="mobile">
            <el-input v-model="ruleForm.user_mobile" style="width:300px;" placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="openid" prop="openid">
            <el-input v-model="ruleForm.openid" style="width:300px;" placeholder="请输入openid"/>
            </el-form-item>
            <el-form-item>
            <el-button type="info" @click="esc">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import {useRouter,useRoute} from 'vue-router';
import http from '../../api/setting'
import { reactive, ref ,onMounted} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage,ElMessageBox  } from 'element-plus'
import { ru } from 'element-plus/es/locale';
const router=useRouter()
const route=useRoute()
const value = ref([])
const props = {
  expandTrigger: 'hover' as const,
}
interface Data{
  list:any,
  adminlist:any,
  date:any
}
const data:Data=reactive({
    list:[],
    adminlist:[],
    date:{}
})

const handleChange = (value:any) => {
  ruleForm.parent_id=value
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
interface RuleFomeData{
  num:string,
  name:string,
  user_mobile:string,
  user:string,
  openid:string,
  parent_id:any|null,
  id:number
}
const ruleForm:RuleFomeData = reactive({
    num:"",
    name: '',
    user_mobile:"",
    user: '',
    openid:"",
    parent_id:0,
    id:0
})
const prop={
  emitPath:false,
  checkStrictly:true,
  value:"id",
  label:"name",
  children:"son",
}
const getlist=async ()=>{
  let res:any=await http.getcharlist()
  let resj:any=await http.getadminlist()
  data.list=res.data
  data.adminlist=resj.data.list
}
const esc=()=>{
  ruleForm.num="",
  ruleForm.name="",
  ruleForm.user_mobile="",
  ruleForm.user="",
  ruleForm.openid="",
  ruleForm.parent_id=0,
  router.push({path:"/charts/keyboard"})
}
onMounted(() => {
  getlist()
  
const historyParams = history.state.params
  if(historyParams.data){
    data.date=historyParams.data
    data.date=JSON.parse(data.date)
    ruleForm.num=data.date.num
    ruleForm.name=data.date.name
    ruleForm.user_mobile=data.date.user_mobile
    ruleForm.user=data.date.user
    ruleForm.openid=data.date.openid
    ruleForm.parent_id=data.date.parent_id
    ruleForm.id=data.date.id
}
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
  ],
  region: [
    {required: true,message: '请选择负责人名称',trigger: 'change'}
  ],
  openid:[
    {required: true,message: 'openid必填',trigger: 'change'}
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid, fields) => {
    if (valid) {
    console.log(ruleForm)
      let res:any=await http.edithouse(ruleForm.name,ruleForm.num,ruleForm.openid,ruleForm.parent_id,ruleForm.user,ruleForm.user_mobile,ruleForm.id)
      console.log(res)
    if(res.code==10000){
      ElMessage({
            message: "修改成功",
            type: 'success',
        })
        router.push({path:"/charts/keyboard"})
    }
      
    } else {
      console.log('error submit!', fields)
    }
  })
}





</script>

<style scoped>
.box{
  margin-left: 40px;
}

.popper .el-cascader-panel .el-checkbox {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}
.popper .el-cascader-panel .el-checkbox__input {
  margin-top: 2px;
  margin-left: 8px;
}
.popper .el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}


  .popper .el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}
.popper .el-cascader-panel .el-checkbox {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}
.popper .el-cascader-panel .el-radio__input {
  margin-top: 10px;
  margin-left: 8px;
}
.popper .el-cascader-panel .el-checkbox__input {
  margin-top: 2px;
  margin-left: 8px;
}
.popper .el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>